<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="套餐管理">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data="loadData"
        :showPagination="true"
      >
        <span slot="action" slot-scope="text, record">
          <a-popconfirm
            title="确认退还押金吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="toRenfund(record)"
          >
            <a
            >
              退还押金
            </a>
          </a-popconfirm>
          <a-divider type="vertical"/>
          <a
            @click="openBattery(record)"
          >
            操作电池
          </a>
          <a-divider type="vertical"/>
          <a
            @click="toDetail(record)"
          >
            编辑
          </a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirmDelete(record.id)"
                  @cancel="()=>{}"
                >
                  <a href="#">删除电柜</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
    </div>
    <user-battery :model="detailData" :visible="userBatteryVisible" @ok="modalOk" @cancel="() => { this.userBatteryVisible = false }" />
    <!-- <menu-dialog :model="detailData" :visible="detailVisible" @ok="modalOk" @cancel="() => { this.detailVisible = false }" /> -->
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getUsersLists, deleteUser } from '@/api/users'
import { createOrder21 } from '@/api/order'
import MenuDialog from './Detail'
import UserBattery from './UserBattery'

export default {
  name: 'MenuLists',
  components: {
    STable,
    MenuDialog,
    UserBattery
  },
  data () {
    return {
      status: 'all',
      userBatteryVisible: false,
      detailVisible: false,
      detailData: null,
      columns: [
        {
          title: '套餐ID',
          dataIndex: 'id',
          customRender: (text, record, index) => index + 1
        },
        {
          title: '小程序标识',
          dataIndex: 'username'
        },
        {
          title: '昵称',
          dataIndex: 'nickName'
        },
        {
          title: '手机号码',
          dataIndex: 'phoneNumber'
        },
        // {
        //   title: '昵称',
        //   dataIndex: 'nickName'
        // },
        // {
        //   title: '性别',
        //   dataIndex: 'gender'
        // },
        // {
        //   title: '状态',
        //   dataIndex: 'state'
        // },
        // {
        //   title: '头像链接',
        //   dataIndex: 'picture'
        // },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: paramter => {
        const pageSize = 10
        return getUsersLists({ $skip: paramter.pageSize * (paramter.pageNo - 1), $limit: pageSize, '$sort[id]': 1 }).then(res => {
          const totalCount = parseInt(res.headers['x-count'])
          const rtData = {
            data: res.data,
            pageSize: pageSize,
            pageNo: paramter.pageNo,
            totalPage: Math.ceil(totalCount / pageSize),
            // totalPage: (totalCount + pageSize - 1) / pageSize,
            totalCount: totalCount
          }
          return rtData
        })
      }
      // loadData: (paramter) => {
      //   return getUsersLists().then(res => {
      //     return {

      //       data: res.data
      //     }
      //   })
      // }
    }
  },
  methods: {
    toRenfund (record) {
      const userId = record.id
      const refundData = {
        orderItems: [
          {
            commodityId: -3,
            count: -1
          }
        ],
        userId: userId,
        summary: '退还押金'
      }
      createOrder21(refundData).then(res => {
        this.$message.success('退还押金成功！请继续解绑电池')
        console.log(res)
      }).catch(e => {
        console.error(e)
      })
    },
    modalOk () {
      this.$refs.table.refresh(true)
      this.detailVisible = false
    },
    confirmDelete (id) {
      deleteUser(id).then(res => {
        this.$refs.table.refresh(true)
        console.log(res)
      }).catch(e => {
        console.error(e)
      })
    },
    openBattery (item) {
      console.log(item)
      this.detailData = item
      this.userBatteryVisible = true
    },
    toDetail (item) {
      console.log(item)
      this.detailData = item
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
